<template>
  <div>
    <div style="text-align:center;">
      <div>
        <el-button type="primary" class="btn" @click="printPage">打印</el-button>
        <!--<el-button type="primary" class="btn_" @click="addPage">录入数据</el-button>-->
        <!--<el-button type="primary" class="btn_" @click="updatePage">编辑数据</el-button>-->
        设置起始页码：
        <input
          v-model="pageStartNumber"
          autocomplete="off"
          spellcheck="false"
          type="text"
          placeholder=""
          class="tiwen"
          @input="isFlag"
          style="width: 100px"
        />
        <el-button type="primary" class="btn_" @click="toPage('up')"  v-if="week==1" disabled>上一页</el-button>
        <el-button type="primary" class="btn_" @click="toPage('up')"  v-if="week!=1">上一页</el-button>
        第
        <input
          v-model="week"
          autocomplete="off"
          spellcheck="false"
          type="text"
          placeholder=""
          class="tiwen"
          style="width: 140px"
          disabled
        />页
        <el-button type="primary" class="btn_" @click="toPage('down')" v-if="week>=maxweek" disabled>下一页</el-button>
        <el-button type="primary" class="btn_" @click="toPage('down')"  v-if="week<maxweek">下一页</el-button>
      </div>
    <!--v-if="dialogImgVisible"-->
    </div>
    <div class="con"  id="print-handOver-div"  v-if="dialogMainVisible">
      <div
        style="
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
          "
      >
        <img src="@/icons/img/changzhi.png" style="width: 30px;height: 30px;">{{ this.$store.state.City }}医院<br />
        体温单
      </div>
    <el-row class="info" :gutter="24">
      <el-col :span="3">姓名：{{name}}</el-col>
      <el-col :span="2.5">性别：{{sex}}</el-col>
      <el-col :span="2.5">年龄：{{ this.$store.state.user.severFall.ageOrMonthAge}}</el-col>
      <el-col :span="4">科别：{{department}}</el-col>
      <el-col :span="3">床号：{{bedCode}}</el-col>
      <el-col :span="5">住院日期：{{enterTime}}</el-col>
      <el-col :span="4">住院号：{{ this.$store.state.user.severFall.visit_id }}</el-col>

    </el-row>
    <table class="noRowspan" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td style="width: 160px;">日期</td>
        <td class="item" v-for="(item,i) in tableData.date" :key="i">{{item}}</td>
      </tr>
      <tr>
        <td style="width: 160px;">入科天数</td>
        <td class="item" v-for="(item,i) in tableData.daysAfterSick" :key="i">{{item}}</td>
      </tr>
      <tr >
        <td style="width: 160px;">术后日数</td>
        <td class="item" v-for="(item,i) in tableData.daysAfterOperation" :key="i">{{item}}</td>
      </tr>
      <tr>
        <td style="width: 160px;">时间</td>
        <td class="item" v-for="(item,i) in days" :key="i">{{item}}</td>
      </tr>
    </table>
    <div class="chart" style="display:flex">
      <div class="empty">
         <span class="chartItem2">
                    <img style="width: 10px;height: 10px;" src="../../icons/img/hr.png"/>心率/<br/>(次/分)
                    <span style="bottom:665px;margin-left: 30px" class="scale">160</span>
                    <span style="bottom:570px;margin-left: 30px" class="scale">140</span>
                    <span style="bottom:475px;margin-left: 30px" class="scale">120</span>
                    <span style="bottom:380px;margin-left: 30px" class="scale">100</span>
                    <span style="bottom:285px;margin-left: 30px" class="scale">80</span>
                    <span style="bottom:190px;margin-left: 30px" class="scale">60</span>
                    <span style="bottom:95px;margin-left: 30px" class="scale">40</span>
        </span>
        <span class="chartItem">
                    <img style="width: 10px;height: 10px;" src="../../icons/img/temp.png"/>体温°C
                    <span style="bottom:665px;margin-left: 30px" class="scale">41</span>
                    <span style="bottom:570px;margin-left: 30px" class="scale">40</span>
                    <span style="bottom:475px;margin-left: 30px" class="scale">39</span>
          <!-- <span style="bottom:500px;margin-left: 60px" class="scale">心率<img style="width: 10px;height: 10px;" src="./hr.png"/></span>-->
                    <span style="bottom:380px;margin-left: 30px" class="scale">38</span>
                    <span style="bottom:285px;margin-left: 30px" class="scale">37</span>
          <!--<span style="bottom:300px;margin-left: 60px" class="scale">体温<img style="width: 10px;height: 10px;" src="./temp.png"/></span>-->
                    <span style="bottom:190px;margin-left: 30px" class="scale">36</span>
                    <span style="bottom:95px;margin-left: 30px" class="scale">35</span>
        </span>
      </div>
        <Render @yHeight="getYHeight" style="width: 840px;" :allList="allList"
        ></Render>
      <!--
       <div  >
        <img :src="imgUrl" style="width: 100%;max-width: 100%;height: 900px;" />
       </div>
      -->
    </div>
    <table class="noRowspan" width="100%" border="0" cellspacing="0" cellpadding="0">
    <!--<table class="noRowspan print" width="100%" border="0" cellspacing="0" cellpadding="0">-->
      <tr>
        <td style="width: 160px;">疼痛</td>
        <td class="item" v-for="(item,i) in code" :key="i">
          <input
          type="text"
          v-model="code[i]"
          style="width: 90%;height: 100%;border: 0;text-align: left;font-size: 8px;"
          @blur="saveTypeDate('code',i,$event)"
        ></input>
        </td>
      </tr>
      <tr>
        <td style="width: 160px;">呼吸(次/分)</td>
        <td class="item" v-for="(item,i) in tableData.brList" :key="i">{{item}}</td>
      </tr>
      <tr>
        <td style="width: 160px;">大便(次/日)</td>
        <td class="item" v-for="(item,i) in code1" :key="i">
          <input
            type="text"
            style="width: 95%;height: 100%;border: 0;text-align: center;"
            v-model="code1[i]"
            @blur="saveTypeDate('code1',i,$event)"
          ></input>
        </td>
      </tr>
      <tr>
        <td style="width: 160px;">SPO2(%)</td>
        <td class="item" v-for="(item,i) in code2" :key="i"><input
          type="text"
          style="width: 95%;height: 100%;border: 0;text-align: center;"
          v-model="code2[i]"
          @blur="saveTypeDate('code2',i,$event)"
        ></input></td>
      </tr>
      <tr>
        <td style="width: 160px;">入量(ml)</td>
        <td class="item" v-for="(item,i) in code3" :key="i">
          <input
          type="text"
          style="width: 95%;height: 100%;border: 0;text-align: center;"
          v-model="code3[i]"
          @blur="saveTypeDate('code3',i,$event)"
        ></input></td>
      </tr>
      <tr>
        <td style="width: 160px;">出量(ml)</td>
        <td class="item" v-for="(item,i) in code4" :key="i">
          <input
          type="text"
          style="width: 95%;height: 100%;border: 0;text-align: center;"
          v-model="code4[i]"
          @blur="saveTypeDate('code4',i,$event)"
        ></input>
        </td>
      </tr>
      <tr>
        <td style="width: 160px;">小便(次/ml)</td>
        <td class="item" v-for="(item,i) in code5" :key="i">
          <input
            type="text"
            style="width: 95%;height: 100%;border: 0;text-align: center;"
            v-model="code5[i]"
            @blur="saveTypeDate('code5',i,$event)"
          ></input>
        </td>
      </tr>
      <tr>
        <td style="width: 160px;">血压(mmhg)</td>
        <td class="item" v-for="(item,i) in code6" :key="i">
          <input
            type="text"
            style="width: 95%;height: 100%;border: 0;text-align: center;"
            v-model="code6[i]"
            @blur="saveTypeDate('code6',i,$event)"
          ></input>
        </td>
      </tr>
      <tr>
        <td style="width: 160px;">体重(kg)</td>
        <td class="item" v-for="(item,i) in code7" :key="i">
          <input
            type="text"
            style="width: 95%;height: 100%;border: 0;text-align: center;"
            v-model="code7[i]"
            @blur="saveTypeDate('code7',i,$event)"
          ></input>
        </td>
      </tr>
      <tr>
        <td style="width: 160px;">身高(cm)</td>
        <td class="item" v-for="(item,i) in code8" :key="i">
          <input
            type="text"
            style="width: 95%;height: 100%;border: 0;text-align: center;"
            v-model="code8[i]"
            @blur="saveTypeDate('code8',i,$event)"
          ></input>
        </td>
      </tr>
      <div>
        <tr>
          <td style="width: 160px;">过敏史</td>
          <td class="item" v-for="(item,i) in code9" :key="i">
            <input
              type="text"
              style="width: 95%;height: 100%;border: 0;text-align: center;"
              v-model="code9[i]"
              @blur="saveTypeDate('code9',i,$event)"
            ></input>
          </td>
        </tr>
      </div>
      <div>
        <tr>
          <td style="width: 160px;">特殊治疗</td>
          <td class="item" v-for="(item,i) in code10" :key="i">
            <input
              type="text"
              style="width: 95%;height: 100%;border: 0;text-align: center;"
              v-model="code10[i]"
              @blur="saveTypeDate('code10',i,$event)"
            ></input>
          </td>
        </tr>
      </div>
    </table>
      <div style="text-align:center;margin-top: 1px;" v-if="this.pageStartNumber==''">第{{this.week}}页</div>
      <div style="text-align:center;margin-top: 1px;" v-if="this.pageStartNumber!=''">第{{this.pageNum}}页</div>
    </div>

  </div>
</template>
<script>
import Render from '@/views/nursingDocument/Render'
import { jyxdPagePrint } from "@/utils/jyxd-page-printer.js";
import {
  bodyTemperatureGetListByTime,
  bodyTemperatureGetDataByPatientId,
  bodyTemperatureGetDataByPatientIdAndWeek,
  temperatureReportInsertAndUpdate,
  temperatureReportQueryData,
  savaTemperatureData,
  patientgetList, findPage
} from "@/api/table";
export default {
  data() {
    return {
      pageNum: 1,
      pageStartNumber: "",
      imgUrl: '',
      dialogMainVisible: true,
      dialogImgVisible: false,
      //打印参数设置
      printHandOverParam: {
        print_id: "print-handOver-div", //完整打印区域最外包裹, id名
        paper_height: "1550", //纸张长度，目前不自动分页，页面代码自行设计分页模式
        paper_width: "1100", //纸张宽度，根据横向纵向调整，影响页面折行效果
        preview: "",
      },
      week: 1,//入科第几周
      maxweek: "",
      isShowImg: false,//进度条
      isShowAdd: false,//录入页面显示
      templateList: [],
      allList: {
        painList: [],//疼痛折线
        temperatureList: [],//体温折线
        //hrAndRRList:[], //心率和脉搏折线
        wordsList: [],//文字描述,
        hrList: [],
        pulseList: []
      },
      //患者信息
      tableData: {
        date: ['', '', '', '', '', '', ''],
        daysAfterSick: ['', '', '', '', '', '', ''],
        daysAfterOperation: ['', '', '', '', '', '', ''],
        brList: ['', '', '', '', '', '', '',
          '', '', '', '', '', '', '',
          '', '', '', '', '', '', '',
          '', '', '', '', '', '', '',
          '', '', '', '', '', '', '',
          '', '', '', '', '', '', '',
          '', '', '', '', '', '', '',
        ],
        shitCountList: ['', '', '', '', '', '', ''],
        spo2List: ['', '', '', '', '', '', ''],
        inputCountList: ['', '', '', '', '', '', ''],
        outputCountList: ['', '', '', '', '', '', ''],
        urineCountList: ['', '', '', '', '', '', ''],
        bpList: ['', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        heightList: ['', '', '', '', '', '', ''],
        weightList: ['', '', '', '', '', '', ''],
        allergicHistoryList: ['', '', '', '', '', '', ''],
        specialTreatmentList: ['', '', '', '', '', '', ''],
      },
      today: '',
      patientId: "", //病人id
      name: "", //姓名
      sex: "", //性别
      age: "", //年龄
      visitId: "", //住院号
      visitcode: "",
      department: "", //来源科室
      enterTime: "", //入科时间
      bedCode: "", //床号
      YHeight: 0,
      days:
        [3, 7, 11, 15, 19, 23, 3, 7, 11, 15, 19, 23, 3, 7, 11, 15, 19, 23, 3, 7, 11, 15, 19, 23, 3, 7, 11, 15, 19, 23, 3, 7, 11, 15, 19, 23, 3, 7, 11, 15, 19, 23],
      //天数
      isShow: false,  //是否显示特定表格
      yesRowspanTable: [], //特定表格数据
      code: ['', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', ''
      ],
      code1: ['', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', ''
      ],
      code2: ['', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', '',
        '', '', '', '', '', ''
      ],
      code3: ['', '', '', '', '', '', ''],
      code4: ['', '', '', '', '', '', ''],
      code5: ['', '', '', '', '', '', ''],
      code6: ['', '', '', '', '', '', ''],
      code7: ['', '', '', '', '', '', ''],
      code8: ['', '', '', '', '', '', ''],
      code9: ['', '', '', '', '', '', ''],
      code10: ['', '', '', '', '', '', ''],
      code11: ['', '', '', '', '', '', ''],
      code12: ['', '', '', '', '', '', ''],
      code13: ['', '', '', '', '', '', ''],
      code14: ['', '', '', '', '', '', ''],
      code15: ['', '', '', '', '', '', ''],
      code16: ['', '', '', '', '', '', ''],
    }
  },
  computed: {
    getData() {
      return this.$store.state.user.severFall;
    },
  },
  watch: {
    getData() {
      this.data = this.$store.state.user.severFall;
      if (
        typeof this.data.patient_id == "string" &&
        this.data.patient_id.length > 0
      ) {
        this.name = this.data.name;
        this.sex = this.data.sex;
        this.department = this.data.department_name == "" ? "重症医学科" : this.data.department_name;
        this.enterTime = this.data.visit_time == "" ? "" : this.data.visit_time.substring(0, 10);
        this.visitId = this.data.visit_code;
        this.visitcode = this.data.visit_code;
        this.patientId = this.data.patient_id;
        this.bedCode = this.data.bed_code;
        patientgetList({visitId: this.data.visit_id}).then((res) => {
          if (res.data[0].age !== '') {
            this.age = res.data[0].age;
          }
        });
        //设置页码
        this.findPageByPatientId();
        if (this.data.unplanned == "" || this.data.unplanned == null || this.data.unplanned == 0) {
          this.$message({
            message: "请在首页补全患者信息",
            type: "warning",
            duration: 1500
          });
        } else {
          //初始化体温列表
          this.initTemlateList();
        }
      } else {
        this.$message({
          message: "请先选择病人",
          type: "warning",
          duration: 1500
        });
      }
    },
    //页码属性
    //页码属性
    pageStartNumber() {
      var pageStart = "";
      if (this.pageStartNumber == "") {
        pageStart = 0;
      } else {
        pageStart = this.pageStartNumber - 1;
      }
      this.pageNum = parseInt(pageStart) + parseInt(this.week);
    },
    week() {
      var pageStart = "";
      if (this.pageStartNumber == "") {
        pageStart = 0;
      } else {
        pageStart = this.pageStartNumber - 1;
      }
      this.pageNum = parseInt(pageStart) + parseInt(this.week);
    },
  },
    created() {
      this.data = this.$store.state.user.severFall;
      patientgetList({ visitId: this.data.visit_id }).then((res) => {
        if(res.data[0].age!==''){
          this.age = res.data[0].age;
        }
    });
    },
    mounted(){
      //初始化患者数据
      this.data = this.$store.state.user.severFall;
      if (
        typeof this.data.patient_id == "string" &&
        this.data.patient_id.length > 0
      ) {
        this.name=this.data.name;
        this.sex=this.data.sex;
        this.department=this.data.department_name==""?"重症医学科":this.data.department_name;
        this.enterTime=this.data.visit_time==""?"":this.data.visit_time.substring(0,10);
        this.bedCode = this.data.bed_code;
        this.visitId = this.data.visit_code;
        this.visitcode = this.data.visit_code;
        this.patientId = this.data.patient_id;
        this.today=this.getFullDate(new Date());
        if(this.data.unplanned=="" || this.data.unplanned==null || this.data.unplanned==0){
          alert('请在首页补全患者信息')
        // this.$message({
        //   message: "请在首页补全患者信息",
        //   type: "warning",
        //   duration: 1500,
        // });
        return;
        }else{
          //设置页码
          this.findPageByPatientId();
          //初始化体温列表
          this.initTemlateList();
        }
      }else{
        this.$message({
          message: "请先选择病人",
          type: "warning",
          duration: 1500
        });
      }
                  patientgetList({ visitId: this.data.visit_id }).then((res) => {
        if(res.data[0].age!==''){
          this.age = res.data[0].age;
        }
    });
    },
    methods:{
      //设置页码
      findPageByPatientId(){
        findPage({
          patientId: this.data.patient_id,
        }).then((res) => {
          if(res.data!=null &&　res.data.length>0){
            this.pageStartNumber=res.data[0].pageNum;
          }else{
            this.pageStartNumber="";
          }
        });
      },
    isFlag(){
      if(this.week>1){
        alert("请翻到体温单第一页设置");
        this.pageStartNumber="";
        return;
      }
      this.pageStartNumber=this.pageStartNumber.replace(/[^0-9.]/g,'');
    },
      getFullDate(date) {
        var str = "" + date.getFullYear();
        if (date.getMonth() < 9) str += "-0" + (date.getMonth() + 1);
        else str += "-" + (date.getMonth() + 1);
        if (date.getDate() < 10) str += "-0" + date.getDate();
        else str += "-" + date.getDate();
        return str;
      },
      toPage(page){
        if(page=="up"){
          this.week=this.week-1;
          this.pageNum= parseInt(this.pageStartNumber)-1;
        }else{
          this.week=this.week+1;
          this.pageNum= parseInt(this.pageStartNumber)+1;
        }
        this.refreshPageData();
      },
      //刷新页面数据
      refreshPageData(){
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        bodyTemperatureGetDataByPatientIdAndWeek(
          { PatientId:this.patientId,
            week:this.week
          }
        ).then((res) => {
          if (res.code == 200) {
            this.week=res.data.week;
            this.allList={
              temperatureList:res.data.temperatureList,
              wordsList:res.data.wordsList,
              hrList:res.data.hrList,
            };
            console.log(res.data.wordsList)
            this.tableData.daysAfterSick=res.data.hospitalDays;
            this.tableData.date=res.data.dayList;
            //呼吸单独处理   temperature
            this.tableData.brList=[];
            res.data.brList.forEach((br,i) => {
              this.tableData.brList.push(br.br);
            });
            this.code=res.data.otherData.code;
            this.code1=res.data.otherData.code1;
            this.code2=res.data.otherData.code2;
            this.code3=res.data.otherData.code3;
            this.code4=res.data.otherData.code4;
            this.code5=res.data.otherData.code5;
            this.code6=res.data.otherData.code6;
            this.code7=res.data.otherData.code7;
            this.code8=res.data.otherData.code8;
            this.code9=res.data.otherData.code9;
            this.code10=res.data.otherData.code10;
            this.code11=res.data.otherData.code11;
            this.code12=res.data.otherData.code12;
            this.code13=res.data.otherData.code13;
            this.code14=res.data.otherData.code14;
            this.code15=res.data.otherData.code15;
            this.code16=res.data.otherData.code16;
            loading.close();
          }
        })
      },
      initTemlateList(){
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        //this.isShowImg=true;
        //通过当前时间和患者id查询列表，如果是空返回默认列表
        bodyTemperatureGetDataByPatientId(
          { PatientId:this.patientId}
        ).then((res) => {
          if (res.code == 200) {
            this.week=res.data.week;
            this.maxweek=res.data.week;
            this.allList={
              temperatureList:res.data.temperatureList,
              wordsList:res.data.wordsList,
              hrList:res.data.hrList,
            };
            console.log(res.data.temperatureList)
            this.tableData.daysAfterSick=res.data.hospitalDays;
            this.tableData.date=res.data.dayList;
            //呼吸单独处理   temperature
            this.tableData.brList=[];
            res.data.brList.forEach((br,i) => {
              this.tableData.brList.push(br.br);
            });
            this.code=res.data.otherData.code;
            this.code1=res.data.otherData.code1;
            this.code2=res.data.otherData.code2;
            this.code3=res.data.otherData.code3;
            this.code4=res.data.otherData.code4;
            this.code5=res.data.otherData.code5;
            this.code6=res.data.otherData.code6;
            this.code7=res.data.otherData.code7;
            this.code8=res.data.otherData.code8;
            this.code9=res.data.otherData.code9;
            this.code10=res.data.otherData.code10;
            this.code11=res.data.otherData.code11;
            this.code12=res.data.otherData.code12;
            this.code13=res.data.otherData.code13;
            this.code14=res.data.otherData.code14;
            this.code15=res.data.otherData.code15;
            this.code16=res.data.otherData.code16;
            loading.close();
          }
        })
      },
      getYHeight(msg){
        this.YHeight = msg
      },
      //打印
      printPage(){
        document.getElementById('main').style.display = 'none'
        document.getElementById('mainImg').style.display = 'block'
        jyxdPagePrint(this.printHandOverParam);
        document.getElementById('main').style.display = 'block'
        document.getElementById('mainImg').style.display = 'none'
      },
      //设置呼吸机
      setR(type,i,event,value){
        this.Rvalue='R';
        this.RList[0]=this.code[i];
        this.Rindex=i;
        this.dialogVisibleR=true;
      },
      OK(){
        savaTemperatureData(
          {
            patientId:this.patientId,
            temperatureType:"code2",
            pageNumber:this.week,
            serialNumber:this.Rindex,
            temperatureValue:this.Rvalue
          }
        ).then((res) => {
          if(res.code==200){
            this.$message({
              message: "保存成功",
              type: "success"
            });
            this.$set(this.tableData.brList, this.Rindex, this.Rvalue);
          }else{
            this.$message({
              message: "保存失败",
              type: "warning"
            });
          }
        })
        this.dialogVisibleR=false;
      },
      NO(){
        this.dialogVisibleR=false;
      },
      //失去焦点事件保存数据
      saveTypeDate(type,i,event,value){
        /**
         if(type=='code2' && value!="R" && value==this.tableData.brList[i]){
        //强制更新页面视图
        this.$set(this.tableData.brList, i, this.code[i]);
        this.$set(this.code, i, "");
        this.$message({
          message: "请到生命体征中编辑数据",
          type: "warning"
        });

      }else{
         **/
        savaTemperatureData(
          {
            patientId:this.patientId,
            temperatureType:type,
            pageNumber:this.week,
            serialNumber:i,
            temperatureValue:event.target.value
          }
        ).then((res) => {
          if(res.code==200){
            this.$message({
              message: "保存成功",
              type: "success"
            });
          }else{
            this.$message({
              message: "保存失败",
              type: "warning"
            });
          }
        })
      }

      },
  components:{
    Render
  },
}
</script>
<style  scoped>
body {text-align: center;}
.con {
  padding-bottom: 1px;
  position: relative;
  width: 1000px;
  max-width: 1000px;
  height: 1450px;
  margin:0 auto;
}
.con.info{
  font-size: 10px
}
.con.chart {
  width: 1000px;
  border-right: 1px solid #000;
}
.con.chart.empty{
  width: 160px;
  height: 900px;
  display: flex;
}
.con #main{
  flex: 1
}
.el-row{
  margin: 5px 0 !important
}
.flex{
  display: flex;
  justify-content: space-between;
}
.empty{
  display: flex;
}
.noRowspan {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  text-align: center;
}
.noRowspan  tr {
  display: flex;
  width: 1000px;
}
.noRowspan  tr  td{
  width: 96px;
  padding:1px 0;
  text-align: center;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
}
.noRowspan tr td.item{
  flex:1;
}
.yesRowspan {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
.yesRowspan  tr {
  display: flex;
  width: 840px;
}
.item.date{
  flex:1;
  padding: 0;
  font-size: 10px;
  border-left: 1px solid #000;
}
.noRowspan tr .date{
  padding: 0;
  font-size: 10px;
}
.date{
  width: 69px;
  padding:1px 0;
  text-align: center;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
}
.time{
  width: 23px;
  padding:1px 0;
  text-align: center;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
}
.yesRowspan{
  font-size: 8px;
  padding: 1px 0;
  margin-bottom: 10px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
.chartItem {
  /**border-left: 1px solid #000;**/
  border-bottom: 1px solid #000;
  text-align: center;
  font-size: 10px;
  position: relative;
  width: 80px;
}
.chartItem2 {
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  text-align: center;
  font-size: 10px;
  position: relative;
  width: 80px;
}
.chartItem2 .scale{
  position: absolute;
  left: 2px;
  z-index: 840;
}
.chartItem .scale{
  position: absolute;
  left: 2px;
  z-index: 966;
}
.pageNum{
  position: absolute;
  right:0;
  bottom:0
}
.c {
  display: flex;
}
.c div {
  flex: 1;
  border-right: 1px solid;
}
.conta{
  display: flex;
}
.conta div{
  flex: 1;
  border-right: 1px solid;
  height: 21px;
  line-height: 21px;

}
.btn {
  position: relative;
  margin-left: 10px;
}
.btn_ {
  position: relative;
  margin-left: 50px;
}
.pox{
  height: 24px;/*给内部div设置了高度，该div才会垂直居中*/
  display: inline-block; /*一定要将div设置为inline-block*/
  vertical-align: middle;/*设置该元素在父元素中的位置*/
}
.afternoon{
  width: 30px;
  padding:1px 0;
  text-align: center;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
}
.hours{
  width: 20px;
  padding:1px 0;
  text-align: center;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
}
</style>
